<template>
    <div class="default-main ba-table-box">
        <div style="width: 100%; background-color: #fff; padding: 5px;display: flex;">
            <el-input v-model="filterParams.cash_out_no" class="ml-3 w-40" placeholder="订单编号" clearable></el-input>
            <el-input v-model="filterParams.keyword" class="ml-3 w-40" placeholder="提现人姓名" clearable></el-input>
            <el-input v-model="filterParams.audit" class="ml-3 w-40" placeholder="审批人姓名" clearable></el-input>
            <div class="block" style="margin-left: 12px">
                <el-date-picker v-model="filterParams.audit_time" type="daterange" range-separator="-" start-placeholder="审核开始时间"
                    end-placeholder="审核结束时间" :size="size" @change="filChange"  value-format="YYYY-MM-DD"/>
            </div>
            <el-button class="ml-3" @click="resetChange">
                <Icon name="fa fa-refresh" class="text-current text-sm mr-1"></Icon>重置
            </el-button>
            <el-button type="primary" @click="getData">
                <Icon name="fa fa-search" class="text-white text-sm mr-1"></Icon>查询
            </el-button>
        </div>
        <div class="bg-white mt-2 p-3">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabChange">
                <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title"
                    :name="item.name"></el-tab-pane>
            </el-tabs>
        </div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="序号" width="100"></el-table-column>
            <el-table-column prop="cash_out_no" label="订单编号" width="180"></el-table-column>
            <el-table-column prop="transfer_realname" label="提现人姓名" width="130"></el-table-column>
            <el-table-column prop="transfer_mobile" label="提现人联系方式" width="150"></el-table-column>
            <el-table-column prop="create_time" label="提现时间" width="180"></el-table-column>
            <el-table-column prop="apply_money" label="提现金额" width="100"></el-table-column>
            <el-table-column prop="admin.nickname" label="审批人" width="100"></el-table-column>
            <el-table-column prop="audit_time" label="审批时间" width="180"></el-table-column>
            <el-table-column prop="status_name" label="审批状态" width="100"></el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope"><el-tooltip class="box-item" effect="dark" content="审批" placement="top" v-if="scope.row.status==1">
                        <el-button type="primary" size="small" @click="godetail(scope.row)" class="ml-3 w-7 h-7">
                            <Icon name="fa fa-pencil" class="text-white text-lg"></Icon>
                        </el-button> </el-tooltip>
                        <div v-else @click="godetails(scope.row)">查看详情</div>
                    </template>

            </el-table-column>
        </el-table>
        <div class="paging">
            <el-pagination v-model:currentPage="filterParams.page" v-model:page-size="filterParams.limit" background
                layout="sizes, prev, pager, next, jumper" :total="paging.total" @size-change="getData"
                @current-change="getData" />
        </div>
        <ShowMdale :modelValue="fastEditShow" :cateid="cateid" @close="fastEditShow = false" :detaFlage="detaFlage" @closeSuccess="handleClick"></ShowMdale>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import createAxios from '/@/utils/axios'
import ShowMdale from './reviewDetail.vue'
import log from '/@/lang/backend/zh-cn/crud/log'
const size = ref<'default' | 'large' | 'small'>('default')
// import { log } from '/@/api/backend/routine/AdminInfo'
let fastEditShow: any = ref(false) // 控制快速修改信息的弹层
let cateid = ref() // 类别列表
let detaFlage = ref(0) // 1详情

const godetail = (row: any) => {
    detaFlage.value=0
    fastEditShow.value = true
    console.log("eoeoeoe", row.id);
    cateid.value = row.id

}
const godetails = (row: any) => {
    detaFlage.value=1
    fastEditShow.value = true
    console.log("eoeoeoe", row.id);
    cateid.value = row.id

}
let filterParams: any = reactive({
    cash_out_no:'',//订单号
    keyword:'',//会员名字
    status:'',//状态：1: "待审核", 2: "待转账", 3: "已转账", -1: "已拒绝", -2: "已取消"
    audit:'',
    page: 1,
    limit: 10,
    audit_time:[]
})
let currentRow: any = ref({}) // 当前选择的行数据
let infoShow: any = ref(false) // 控制修改信息的弹层

let tableData = ref()
// const
let paging = ref({
    total: 0,
})
const filChange = () => {
    console.log(filterParams.time);

}
const handleClick = () => {
    getData()
}
const getData = () => {
    createAxios({ url: '/admin/member.CashOut/lists', method: 'get', params: { ...filterParams } }).then((res) => {
        console.log('res111111111111', res)
        tableData.value = res.data.data
        paging.value.total = res.data.total
    })
}
let activeName: any = ref('') //tab切换绑定值
const editableTabs = ref([
    {
        title: '全部',
        name: '',
    },
    {
        title: '审批通过',
        name: 3,
    },
    {
        title: '审批不通过',
        name: -1,
    },
])
const tabChange = () => {
    console.log(activeName)
    filterParams.status = activeName
    getData()
}
const resetChange = () => {
    filterParams.cash_out_no = ''
    filterParams.keyword = ''
    filterParams.audit_time = ''
    filterParams.audit = ''
    getData()
}
getData()
onMounted(() => { })
</script>

<style scoped lang="scss">
.paging {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>
